@mixin clearfix {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

// 边框阴影
@mixin hover {
  transition: box-shadow 0.3s;
  -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
}

// flex布局
@mixin flex($direction: row, $content: space-around, $items: center) {
  display: flex;
  flex-direction: $direction;
  justify-content: $content;
  align-items: $items;
}